import React, { Component } from 'react';
import styles from './common.css';
import { Button } from 'antd';
export default class NotFound extends Component {
  componentDidUpdate() {
    var Error = document.getElementById("Error");
    if (Error) { //此处在加一层判断，更加严密，如果box存在的情况下获取
      console.log(Error.offsetWidth);
    }
    (function () {
      function ready(fn) {
        if (document.readyState !== 'loading') {
          fn();
        } else {
          document.addEventListener('DOMContentLoaded', fn);
        }
      }

      function makeSnow(el) {
        var ctx = el.getContext('2d');
        var width = 0;
        var height = 0;
        var particles = [];

        var Particle = function () {
          this.x = this.y = this.dx = this.dy = 0;
          this.reset();
        }

        Particle.prototype.reset = function () {
          this.y = Math.random() * height;
          this.x = Math.random() * width;
          this.dx = (Math.random() * 1) - 0.5;
          this.dy = (Math.random() * 0.5) + 0.5;
        }

        function createParticles(count) {
          if (count !== particles.length) {
            particles = [];
            for (var i = 0; i < count; i++) {
              particles.push(new Particle());
            }
          }
        }

        function onResize() {
          width =Error.offsetWidth - 48;
          height =Error.offsetHeight-168;
          el.width = width;
          el.height = height;

          createParticles((width * height) / 10000);
        }

        function updateParticles() {
          ctx.clearRect(0, 0, width, height);
          ctx.fillStyle = '#f6f9fa';

          particles.forEach(function (particle) {
            particle.y += particle.dy;
            particle.x += particle.dx;

            if (particle.y > height) {
              particle.y = 0;
            }

            if (particle.x > width) {
              particle.reset();
              particle.y = 0;
            }

            ctx.beginPath();
            ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
            ctx.fill();
          });

          window.requestAnimationFrame(updateParticles);
        }

        onResize();
        updateParticles();
      }

      ready(function () {
        var canvas = document.getElementById('snow');
        makeSnow(canvas);
      });
    })();
  }
  render() {
    return (
      <div style={{ width: 'calc(100% - 48px)', height: 'calc(100% - 48px)',position:'absolute',overflow:'hidden' }} id='Error'>
        <canvas className={styles.snow} id="snow" width="1920" height="917"></canvas>
        <div className={styles.mainText}>
          <h1>天啊。<br />页面在雪地里失踪了。</h1>
          <div className={styles.mainTextA}>
            <Button type="dashed" icon="left" onClick={() => { this.props.history.replace('/home') }}> 返回首页</Button>
          </div>
        </div>
        <div className={styles.ground}>
          <div className={styles.mound}>
            <div className={styles.mound_text}>404 </div>
            <div className={styles.mound_spade}></div>
          </div>
        </div>
      </div>
    )
  }
}
